Auth0を使ってFacebookのソーシャルログイン機能を試してみた

認証認可サービス「Auth0」はさまざまな接続方式に対応した、とても簡単に認証機能を使えることが特徴のサービスです。

本ブログではAuth0のFacebook連携を使って、 Facebookのソーシャルログイン機能 を試してみます！

• Connect Apps to Facebook

前提条件

Auth0のアカウントは発行している前提 で進めます。

Auth0のアカウント作成手順は、弊社ブログで詳しく説明していますので、こちらをご参照ください。

Facebook for Developersへの登録

まず初めに、Facebook for Developersへの登録が必要です。

Facebook for Develpersへの登録は、Facebookアカウントがあれば誰でも作ることができます。

• Facebook for Developers

Facebookアプリの登録

Facebookt for Developersへの登録が完了したら、次にFacebookアプリを作ります。 トップページの My Apps をクリックします。

My Appsのページが開くので、 Add a New App をクリックします。

そうすると入力画面がポップアップするので、 次の項目を入力して、 Create APP ID をクリックして登録を完了させます。

項目	説明
Display Name	アプリケーションの表示名
Contact Email	連絡先用E-mail

Facebookアプリの登録が完了すると、こんな風にダッシュボード画面が開きます。
そこから、 Facebook Login の Set Up を開きます。

QuickStart画面が表示されますので、 Web を選択します。

Site URL を入力してSave後、 Settings 画面を開きます。

次の項目を入力して、 Save Changes します。

項目	説明
Valid OAuth Redirect URIs	サインイン時に許可するコールバックURL。入力値は後述。

Valid OAuth Redirect URIs については、Auth0の作成済みのテナントのドメインのコールバックURLを設定します。

https://<<YOUR_TENANT_NAME>>.auth0.com/login/callback

入力できたら、左側のメニューから Settings > Basic を開いてください。
App ID と App Secret を、のちほどAuth0の設定で利用するのでメモしておいてください。
App Secret の値は、 Show ボタンをクリックすることで表示できます。

これで、Facebook側の設定は完了です。

Auth0の設定

次にAuth0の設定をしていきます。
左側のメニューから、 Connections > Social を開いて、 CREATE CONNECTION をクリックします。

一覧の中から、 Facebook を選択します。

Facebookの各種設定入力を促されるので、先ほどメモしておいた、 App ID と App Secret を入力してください。

入力が終わったら、下の方までスクロールしていき、 CREATE ボタンをクリックします。

そうすると、アプリケーション（クライアント）の一覧画面が表示されるので、有効にしたいアプリケーションのフリップをオンにします。

これで、Auth0側の設定は完了です。

Facebookログインを試す

設定が完了したので、Auth0を使ったFacebookログインを試してみます。 今回はお試しですので、Auth0の Try Connection でやってみます。

左側のメニューから、 Connections > Social を開くと、ConnectionにFacebookが追加されています。 Facebookの右側の … ボタンでメニューを開いて、 Try Connection をクリックします。

そうすると、Facebookの画面に飛んで、こんな感じでFacebookのアプリでログインする説明が表示されるので、そのままログインします。

サインインが完了すると、次のようにFacebookログイン時に取得したユーザー情報が確認できます。

終わりに

Auth0でFacebookログインを試してみました。

Auth0側での設定も簡単ですぐに試すことができました。
他のソーシャルメディアログインもいろいろ試してみようと思います。